<template>
	<view class="container" v-if="loaded">
		<view class="box">
			<view class="cu-bar search bg-white">

				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input  type="text" placeholder="搜索职位"
					 confirm-type="search" v-model="title"></input>
					<button class="cu-btn bg-blue  shadow-blur round" style="width:100px" @click="onSearch()">搜索</button>
				</view>

			</view>

			<view class="bg-white nav-item">
					<view class="flex  p-xs margin-bottom-sm mb-sm ">
						<view class="flex-sub  padding-sm margin-xs radius">

							<!-- <pickerAddress @change="change">{{txt}}</pickerAddress> -->
							<uni-citys :defaultValue="address_name" :placeholder="txt" @change='change' limit='T'></uni-citys>
						</view>
						<view class="flex-sub  padding-sm margin-xs radius">
							<picker mode = selector @change="PickerCategory" :value="index" :range="typeData" range-key="name" >
								<view class="picker">
									{{typeTxt}}
								</view>
							</picker>
						</view>
						<view class="flex-sub  padding-sm margin-xs radius">
								<picker @change="PickerChange" :value="applyIndex" :range="typeOfApply">
									<view class="picker">
										{{applyIndex>-1?'∨'+typeOfApply[applyIndex]:'∨全部状态'}}
									</view>
								</picker>
						</view>
					</view>
			</view>
		</view>

		<scroll-view
			class="list-scroll-content"
			scroll-y
			@scrolltolower="loadData"
		>
			<!-- 空白页 -->
			<empty v-if="loaded === true && worksList.length === 0"></empty>

			<view class="item padding-xl boxbox bg-grey123 radius shadow shadow-lg bg-white margin-top"
				v-for="(item,index) in worksList" :key="index"
				>
				<!-- <view class=" bg-white"> -->
					<view class="flex">
						<view class="title flex-sub padding-top-sm text-cut radius">{{item.position}}</view>
						<view class=" reward radius">{{item.wage}}</view>
					</view>
					<view class="flex  p-xs mb-sm123  margin-bottom-sm mb-sm">
						<view class="flex-twice  margin-xs123  padding-tb-sm margin-xs radius detail">
<!--							<view> {{typeState.edu[item.edu]}} | {{item.age_small+'岁-'+item.age_big+'岁'}} | {{typeState.exp[item.exp]}} | {{typeState.hour[item.hour]}} | {{item.time>''?typeState.time[item.time]+'|':''}}-->
<!--							  {{item.rest>''?typeState.rest[item.rest]+'|':''}} {{item.board!='F'?typeState.board[item.board]+'|':''}}-->
<!--							{{item.social!='F'?typeState.social[item.social]+'|':''}}推荐佣金|稳岗奖金</view>-->
              <view>{{typeState.wx_name[item.wx_name]}}|{{typeState.work[item.work_type]}}|{{typeState.exp[item.exp]}}|{{item.time}}
                |{{typeState.board[item.board]}}|{{item.age_small+'岁-'+item.age_big+'岁'}}|{{typeState.edu[item.edu]}}|{{item.rest}}
                |{{typeState.social[item.social]}}|{{typeState.contract[item.reward]}}{{item.hour>''?('|'+item.hour):''}}
                </view>
						</view>
					</view>
					<view class="flex  p-xs margin-bottom-sm mb-sm">
						<!-- <view class="flex-sub  padding-sm margin-xs radius">{{item.address}}</view> -->
						<view class="flex-2 margin-xs radius company text-cut">{{item.company}}</view>
						<!-- <view class="flex-sub  padding-sm margin-xs radius" @click="goPage('/pages/tabbar/tabbar-2/jobInfo')"> -->
						<view class="flex-sub radius" @click="goDetail(item.id)">
							<button class="cu-btn round bg-green join-btn" v-if="item.apllied=='T'">已投递</button>
							<button class="cu-btn round bg-blue join-btn" v-else>详情</button>
<!--							<button class="cu-btn round bg-green join-btn" v-if="applyIndex==1">已投递</button>-->
<!--							<button class="cu-btn round bg-blue join-btn" v-else>详情</button>-->

						</view>
					</view>
				<!-- </view> -->
			</view>
		<!-- </view> -->

			<uni-load-more :status="loadingType"></uni-load-more>

		</scroll-view>

	</view>


</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from "@/components/empty";
 import pickerAddress from './pickerAddress.vue'
import uniCitys from '@/components/biaofun-region/biaofun-region.vue';
import {
        mapState
    } from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty,
			pickerAddress,
			uniCitys
		},
		data() {
			return {
				tabed:false,
				loaded:false,
				isMP:false,
				loadingType: 'more',
				userState:1,
				titleNViewBackground: '#FFF',
				area_id:[],
        typeData:[{id:'',name:'全部岗位'}],
				address_name:[],
				wage_big:'',
				page:1,
				wage_small:'',
				position_type:'',
				work_type:'',
				hour:'',
				firstPage:'',
				worksList: [{}],
				txt: '∨全部区域',
				typeTxt: '∨全部区域',
				title: '',
				typeState:{},
				index: 0,
				workIndex: -1,
				applyIndex: 0,
				typeOfWork: ['全部'],
				typeOfApply: ['全部状态','未投递','已投递'],
				PositionCategory: ['全部类型'],
				Positionindex:[''],
				hourIndex:['']
			};
		},
		computed: {
			// ...mapState(['hasLogin','userInfo'])
		},
		onLoad(query) {
			console.log(query);
			const scene = decodeURIComponent(query.scene)
			console.log(scene);
			let cid = scene.replace('cid=','');
			if(cid!=undefined&&cid){
				uni.setStorageSync('cid',cid)
			}
			console.log(cid)
			this.loaded=true;
			console.log('onload')
		},
		onShow() {

			// let state = uni.getStorageSync('tabState');;
			// this.userState = uni.getStorageSync('userState');
			// if(state&&state!=undefined){
			// 	uni.hideTabBar()
			// 	this.changeTabbar(state);
			// 	this.loaded=true;
			// 	uni.showTabBar()
			// }
			// else{

			// 	this.loaded=true;
			// }

      let pType =uni.getStorageSync('pType');
      this.position_type = pType!=undefined&&pType>''?pType.id:''
      this.typeTxt = pType!=undefined&&pType>''?'∨'+pType.name:''
      if(this.typeTxt==''){
        this.typeTxt='∨全部岗位'
      }
      uni.setStorageSync('pType','')
      this.getCates();

      this.getTableState();
			this.worksList=[];
			this.page=1;
			this.loadData();
		},
		methods: {
			//获取后端岗位类型
			async getCates(){
				let param = '';
				let t = this;
				let data = await this.$http.get(
					'wx/get_all', //可以直接放链接(将不启用全局定义域名)
					param,
				);
				t.typeData = t.typeData.concat(data)
				console.log(t.typeData);
				this.defaultValue ? this.setDefaultValue() : '';

			},
			async getTableState(){
				let param = 'jobs';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/'+param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.typeState = data
				uni.setStorageSync('jobState',data);
				let obj = data.type
				t.PositionCategory=['全部岗位']
				t.Positionindex=['']
				t.typeOfWork=['全部工时']
				t.hourIndex=['']
				for (let i in obj) {
					t.PositionCategory.push(obj[i]);
					t.Positionindex.push(i);
				}
				obj = data.work
				for (let i in obj) {
					t.typeOfWork.push(obj[i]);
					t.hourIndex.push(i);
				}
				// console.log(arr);
				// t.PositionCategory = data.type
				console.log(data);
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let t = this
				let search = {
					order_by: 'created_at,desc',
					area_id:t.area_id,
					position_type:t.position_type,
					work:t.hour,
					wx_name:this.$wx_name,
					status:'T',
					title:t.title,
					// is_apply:t.applyIndex,
          seeker_id:'',
					}
					if(t.applyIndex>0){
            search.is_apply=t.applyIndex
          }
          let uId = uni.getStorageSync('userId');
          if(uId!=undefined&&uId>''){
            search.seeker_id = uId;
            if(t.area_id.length==[]){
              let userInfo = uni.getStorageSync('userInfo');
              if(userInfo.intention>'0'){
                search.area_id= userInfo.address
                t.address_name = userInfo.address_name
              }
            }
          }
					console.log(JSON.stringify(search))
          let param = {
            search_data:JSON.stringify(search),
            page:t.page,
            per_page:5,
            };
          let that = this;
          this.loadingType = 'loading';
          let data = await this.$http.get(
            'wx/jobs', //可以直接放链接(将不启用全局定义域名)
            param,
          );
          // this.worksList = data
          if(data!=undefined&&data.length>0){
            this.worksList=this.worksList.concat(data)
            this.page++
          }
          console.log(this.worksList)
          //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
          this.loaded = true;

          //判断是否还有数据， 有改为 more， 没有改为noMore
          this.loadingType = 'more';
			},
			tobottom(){
				console.log('tobottom')
			},
			//推荐人才
			pushPerson(){
				this.$refs.pushPerson.toggleMask();
			},
			//推荐人才
			pushPosition(){
				this.$refs.pushPosition.toggleMask();
			},
			//详情页
			navToDetailPage(item) {
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				// uni.showToast({
				// 	title: `功能开发中...`,
				// 	icon: 'none'
				// })
				// return
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/works/detail?id=${id}`
				})
			},
			personDetailPage(item){
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				let id = item.title;
				uni.navigateTo({
					url: `/pages/person/detail?id=${id}`
				})
			},
			//更换tabbar
			changeTabbar(state){
				let tabList = Json.tabList;
				uni.setStorageSync('userState',state);

				let tabBar = tabList[state];
				console.log(tabBar)
				let index=0;
				tabBar.forEach(item=>{
					uni.setTabBarItem({
						index: index,
						text: item.text,
						iconPath: item.iconPath,
						pagePath:item.pagePath,
						selectedIconPath: item.selectedIconPath,
						success:(res)=> {
							console.log(res)
						},
						complete:(e)=> {
							console.log(e)
						},
					})
					index++;
				})
				uni.setStorageSync('tabState',0);

			},

			PickerChange(e) {
				let i = e.detail.value
				// this.hour = this.hourIndex[i]
				this.page = 1;
				// this.workIndex = i;
				this.applyIndex = i;
				this.worksList = [];
				this.loadData();
			},
			onSearch(){
				this.page = 1;
				this.worksList = [];
				this.loadData();
			},
		    PickerCategory(e) {
				let i = e.detail.value
				this.position_type = this.typeData[i].id
          this.typeTxt = '∨'+this.typeData[i].name
				console.log( this.position_type)
				this.index = i;
				this.page = 1;
				this.worksList = [];
				this.loadData();
			},
			change(data) {

				 this.area_id = []
				if(data[0]!=undefined){
					this.area_id.push( data[0].id)
				}
				if(data[1]!=undefined){
					this.area_id.push( data[1].id)
				}
				if(data[2]!=undefined){
					this.area_id.push( data[2].id)
				}

				console.log(data)
				this.page=1
				this.worksList = [];
				this.loadData();
			},
			goDetail(id){
				// let uId = uni.getStorageSync('userId');
				let uId = 1;

				if(uId>"0"&&uId!=undefined){
					// uni.setStorageSync('trainInfo',item);
					uni.navigateTo({
						url: `/pages/tabbar/tabbar-2/jobInfo?id=${id}`
						// url: `/pages/tabbar/tabbar-1/trainInfo`
					})
					return;
				}
			},
			goPage(page){
				// let uId = uni.getStorageSync('userId');

				console.log(page)
				// return;
				uni.navigateTo({
					url: page
				})
			},
		},

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{

	}
	/* #endif */

	.bg-grey123{
		border-radius: 20px;
	}
	.mb-sm123{
		display: flex;
		border-bottom: 2px #5d9dd3 solid ;
		border-top:0px;
		border-left:0px;
		border-right:0px;
	}
	.cu-btns{
		margin: 0px 8px ;
	}
	.cu-btnss{
		margin-right: -11px;
	}
	.boxbox{
		padding: 0px 0px ;
		margin: 26px 10px ;
	}
	.margin-xs123{
	  	display: flex;
		margin:0;
	}
	.margin-lr{

	}
	.container{
		padding-top: 45px;
	}
	.flex-wrap{
		color: #222 !important;
	}
	.person{
		.basis-xs{
			flex-basis: 50%;
			padding: 10px 0;
		}
	}
	.basis-xs{
		flex-basis: 50%;
		padding: 10px 0;
	}
	.basis-xs20{
		flex-basis: 20%;
	}
	.basis-row{
		flex-basis: 100%;
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		width: 80px;
	}
	.flex{
		margin: 0 15px;
		color: #BAC2D2;
		font-size: 12px;
	}
	.flex-2{
		flex:2
	}
	.box{
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 990;
		width: 100%;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
	}
	.list-scroll-content{
		margin-top: 45px;
		height: 600px;
		.item{
			heigth:150px !important;
		}
		.title{
			font-size:16px;
			color:#222222;
			font-weight: bold;
		}
		.reward{
			font-size:20px;
			color:#FF4400;
			font-weight: bold;
			top: 10px;
			right: 5px;
			text-align: right;
		}
		.detail{
			font-size:12px;
			color:#BAC2D2;
			height:50px !important;
		}
	}
	.nav-item{
		text-align: center;
		border-left:0px;
		border-right:0px;
		.flex-sub{
			font-size:14px;
		}

	}
	.top0{
		top: 0;
	}

	page {
		background: #f5f5f5;
	}
	.m-t{
		margin-top: 16upx;
	}


	.position{
		color: #222;
		font-size: 16px;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}
	.item>.flex .subText{
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;

	}
	.portrait-box{
		position: absolute;
		right: 20px;
	}
	.portrait{
		width: 130upx;
		height: 130upx;
		border:5upx solid #fff;
		border-radius: 50%;
	}
	.flex{
		margin: 0 10px;
		color: #222;
	}

	.reward{
		color: #FF4400;
		font-size: 18px;
		position: relative;
		min-width:100px
	}
	.action-btn{
		height: 50px;
		padding: 5px 0;
	}

	.line{
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}

	.cu-avatar{
		width: 50upx;
		height: 50upx;
	}
	.company{
		font-size: 16px;
		height: 30px;
		line-height: 30px;
	}
	.height-14{
		line-height: 14px;
	}
	.action-box{
		text-align: right;
	}
	.join-btn{
		width: 90px;
		font-size: 14px;
		height: 30px;
		border-radius: 17px;
		position: absolute;
		margin: 5px 0px;
		right: 25px;
		// background-color: #0181ff;
	}
	.font14{
		color: #BAC2D2;
		font-size: 14px;
		font-weight: normal;
	}
</style>
